<template>
  <div class="basic-information-container">
    <AutoForm>
      <template #form>
        <el-form
          :inline="true"
          :model="formInline"
          border
          class="demo-form-inline"
        >
          <el-form-item class="form-style" label="摄像头名称:">
            <VideoFormTree
              v-model="formInline.cameraId"
              ref="videoTree"
              defaultTab="1"
              :set-default-value="false"
              show-checkbox
            ></VideoFormTree>
          </el-form-item>
          <el-form-item label="区域归属">
            <el-select
              class="select-width"
              v-model="formInline.regionCode"
              placeholder="请选择区域归属"
              clearable
            >
              <el-option
                v-for="item in regionList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分类">
            <my-single-tree-select
              :dataTree="deviceTypeList"
              :selectedSingleId.sync="formInline.deviceTypeCode"
              :selectedSingleValue.sync="typeId"
            />
          </el-form-item>
          <el-form-item label="摄像头类型:">
            <el-select
              class="select-width"
              v-model="formInline.cameraType"
              placeholder="请选择摄像头类型"
              clearable
            >
              <el-option label="枪机" value="1"></el-option>
              <el-option label="球机" value="2"></el-option>
              <el-option label="半球" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio-group v-model="formInline.status">
              <el-radio label="">全部</el-radio>
              <el-radio label="1">在线</el-radio>
              <el-radio label="0">离线</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="支持AI分析:">
            <el-checkbox
              @change="changeCheckbox"
              v-model="formInline.aianalysis"
            ></el-checkbox>
          </el-form-item> -->
        </el-form>
      </template>
      <template #table>
        <div class="table-style">
          <div class="btn-style">
            <el-button-group style="margin-right: 8px">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch('search')"
              >
                查询
              </el-button>
            </el-button-group>
            <!-- <el-button @click="openAdd" icon="el-icon-plus">新增</el-button> -->
            <el-button @click="handleRest" icon="el-icon-refresh"
              >重置</el-button
            >
            <!-- <el-button @click="handleExport" icon="el-icon-download"
              >导出</el-button
            > -->
            <el-button icon="el-icon-s-operation" @click="handleSort"
              >分类管理</el-button
            >
            <el-button
              :disabled="loadingFullScreen"
              icon="el-icon-s-operation"
              @click="handleAsyncData"
              >同步数据</el-button
            >
          </div>
          <div class="screen-container-body">
            <el-table class="table-self" :data="tableData" style="width: 100%">
              <el-table-column width="50" align="center" type="selection" />
              <el-table-column label="序号" width="50px" type="index" />
              <el-table-column
                prop="focus"
                label="关注"
                width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <img
                    v-if="scope.row.focus == 1"
                    @click="changeFocus(scope.row, '0')"
                    class="imgBg"
                    src="@/assets/video/sc1.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="imgBg"
                    @click="changeFocus(scope.row, '1')"
                    src="@/assets/video/sc2.png"
                    alt=""
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="channelName"
                label="摄像头名称"
                width="350"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="channelId"
                label="摄像头编号"
                align="center"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="regionName"
                label="区县归属"
                align="center"
                width="150"
              >
              </el-table-column>
              <!-- <el-table-column
              prop="cameraTypeStr"
              label="摄像头类型"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cameraType === '1'" type="primary"
                  >枪机</el-tag
                ><el-tag v-else-if="scope.row.cameraType === '2'" type="success"
                  >球机</el-tag
                ><el-tag v-else type="warning">半球</el-tag>
              </template>
            </el-table-column> -->
              <el-table-column label="所属分类" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.deviceType }}</span>
                  <span v-if="scope.row.subType">--</span>
                  <span>{{ scope.row.subType }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="du" label="经纬度" align="center">
                <!-- <br /> -->
                <template slot-scope="scope">
                  <span>{{ scope.row.gpsX }}</span>
                  <span v-if="scope.row.gpsY">，</span>
                  <span>{{ scope.row.gpsY }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                align="center"
                width="140"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status == 1" type="success"
                    >在线</el-tag
                  ><el-tag v-else-if="scope.row.status == 0" type="danger"
                    >离线</el-tag
                  >
                </template>
              </el-table-column>
              <!-- <el-table-column
              prop="aianalysis"
              label="支持AI分析"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.aianalysis == 1" type="success"
                  >是</el-tag
                ><el-tag v-else-if="scope.row.aianalysis == 0" type="danger"
                  >否</el-tag
                >
                <span v-else type="danger">--</span>
              </template>
            </el-table-column> -->
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="openEdit(scope.row.id)"
                    type="text"
                    size="small"
                    >修 改</el-button
                  >
                  <el-button
                    @click="handleDelete(scope.row.id)"
                    type="text"
                    size="small"
                    >删 除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="fanYe">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="formInline.page"
              :page-sizes="[10, 15, 20, 50, 100]"
              :page-size="formInline.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </AutoForm>
    <MyDialog
      v-if="dialogVisibleCopyAdd"
      :dialogVisibleFa.sync="dialogVisibleCopyAdd"
      widthValue="960px"
      dialogTitle="添加"
      :isCenter="true"
    >
      <Add
        v-if="dialogVisibleCopyAdd"
        :dialogVisibleUse.sync="dialogVisibleCopyAdd"
        :regionList="regionList"
        :riverList="riverList"
        @getListNew="handleSearch"
      />
    </MyDialog>
    <MyDialog
      v-if="dialogVisibleCopyEdit"
      :dialogVisibleFa.sync="dialogVisibleCopyEdit"
      widthValue="960px"
      dialogTitle="修改"
      :isCenter="true"
    >
      <Edit
        v-if="dialogVisibleCopyEdit"
        :dialogVisibleUse.sync="dialogVisibleCopyEdit"
        :editDataId="editDataId"
        :regionList="regionList"
        :riverList="riverList"
        @getListNew="handleSearch"
      />
    </MyDialog>
    <MyDialog
      v-if="dialogVisibleSort"
      :dialogVisibleFa.sync="dialogVisibleSort"
      widthValue="700px"
      dialogTitle="分类管理"
      :isCenter="true"
    >
      <Fen
        v-if="dialogVisibleSort"
        :dialogVisibleUse.sync="dialogVisibleSort"
      />
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from "@/components/MyDialog/index.vue";
import AutoForm from "@/components/AutoForm/index.vue";
import Add from "./add.vue";
import Edit from "./edit.vue";
import Fen from "./sort.vue";
import MySingleTreeSelect from "@/components/MySingleTreeSelect/index.vue";
// import {
//   getWaterChannelInfo,
//   getRegionList,
//   deleteChannelById,
//   getWaterRiverList,
//   updateChannel,
//   initEquipments,
// } from "@/api/video/basicInformationApi.js";
// import { getTree } from "@/api/video/basicInformationApi.js";
export default {
  name: "BasicInformation",
  components: {
    AutoForm,
    MyDialog,
    Add,
    Edit,
    Fen,
    MySingleTreeSelect,
  },
  data() {
    return {
      // 修改弹框
      dialogVisibleCopyEdit: false,
      dialogVisibleCopyAdd: false,
      dialogVisibleCopyExport: false,
      dialogVisibleSort: false,
      editDataId: {},
      // 搜索表单
      formInline: {
        cameraName: "",
        regionCode: "",
        cameraType: "",
        deviceTypeCode: "",
        status: "",
        // aianalysis: "",
        page: 1,
        limit: 10,
      },
      // aianalysisCopy: "",
      // 区域
      regionList: [],
      // 河流
      riverList: [],
      // 分页
      tableData: [],
      total: 0,
      //所属分类
      parentIDList: [],
      // 所属分类树形
      deviceTypeList: [],
      typeId: "",
      loadingFullScreen: false,
      activeName: "first",
    };
  },
  created() {
    this.getWaterChannelInfo();
    this.getRegionList();
    this.getWaterRiverList();
    this.parentGetTree();
  },
  mounted() {
    this.$refs.videoTree?.initTree(true);
  },
  methods: {
    // 弹框tab
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 同步数据接口
    handleAsyncData() {
      if (this.loadingFullScreen) {
        return;
      }
      this.loadingFullScreen = true;
      // initEquipments().then((res) => {
      //   if (res.state === 1) {
      //     this.$message({
      //       message: res.message,
      //       type: "success",
      //     });
      //   } else {
      //     this.$message({
      //       message: res.message,
      //       type: "error",
      //     });
      //   }
      //   this.loadingFullScreen = false;
      // });
    },
    // 上级分类
    parentGetTree() {
      // getTree({
      //   // level: 1,
      // }).then((res) => {
      //   if (res.state == 1) {
      //     this.deviceTypeList = [res.data]; //包装成数组树
      //     this.parentIDList = this.treeToArr([res.data]);
      //   }
      // });
    },
    // 拿到节点数组
    treeToArr(data) {
      return data.reduce((res, { id, name, parentid, children }) => {
        res.push({ id, parentid, name });
        if (children && children.length) {
          res = [...res, ...this.treeToArr(children, id)];
        }
        return res;
      }, []);
    },
    // 列表
    async getWaterChannelInfo(query) {
      if (!query) {
        query = this.formInline;
      }
      // const { state, data, total, message } = await getWaterChannelInfo(query);
      // console.log(query, data, "0000");
      // if (state === 1) {
      //   this.tableData = data;
      //   this.total = total;
      // } else {
      //   this.$message({
      //     message: message,
      //     type: "error",
      //   });
      // }
    },
    // 区域 （513200，阿坝州，511083 隆昌，）
    // async getRegionList() {
    //   const { state, data, message } = await getRegionList({
    //     parentCode: "513200", // 哪里用换哪里
    //   });
    //   if (state === 1) {
    //     this.regionList = data;
    //   } else {
    //     this.$message({
    //       message: message,
    //       type: "error",
    //     });
    //   }
    // },
    // 河流
    async getWaterRiverList() {
      // const { state, data, message } = await getWaterRiverList();
      // if (state === 1) {
      //   this.riverList = data;
      // } else {
      //   this.$message({
      //     message: message,
      //     type: "error",
      //   });
      // }
    },
    // // 分析选择处理
    // changeCheckbox() {
    //   this.aianalysisCopy = this.formInline.aianalysis ? "1" : "0";
    // },
    // 打开添加弹框
    openAdd() {
      this.dialogVisibleCopyAdd = true;
    },
    // 打开编辑弹框
    openEdit(item) {
      this.editDataId = item;
      this.dialogVisibleCopyEdit = true;
    },
    // 打开导出弹框
    handleExport() {
      this.download(
        "/video_api/base/exportCameraBaseInfo",
        {},
        `摄像头列表数据_${new Date().getTime()}.xls`
      );
    },
    // 重置功能
    handleRest() {
      this.formInline = {
        cameraName: "",
        regionCode: "",
        cameraType: "",
        deviceTypeCode: "",
        status: "",
        // aianalysis: "",
        page: 1,
        limit: 10,
      };
      // this.aianalysisCopy = "";
      this.handleSearch();
    },
    // 处理分类树形数据搜索的接口入参（不同级别对应的入参字段不一样）
    distinguishTreeQuery() {
      let result = "";
      this.parentIDList.forEach((element) => {
        if (element.name === this.typeId) {
          if (element.parentid === "0") {
            result = "1";
          } else if (!element.parentid) {
            result = "0";
          } else {
            result = "2";
          }
        }
      });
      return result;
    },
    // 按条件检索
    handleSearch(e) {
      let formQuery = { ...this.formInline };
      // formQuery.aianalysis = this.aianalysisCopy;
      if (e === "search") {
        formQuery.page = 1;
      }
      this.$delete(formQuery, "deviceTypeCode");
      if (this.distinguishTreeQuery() === "1") {
        formQuery.deviceTypeCode = this.formInline.deviceTypeCode;
      } else if (this.distinguishTreeQuery() === "2") {
        formQuery.subTypeCode = this.formInline.deviceTypeCode;
      }
      this.getWaterChannelInfo(formQuery);
    },
    handleSizeChange(val) {
      this.formInline.limit = val;
      let formQuery = { ...this.formInline };
      // formQuery.aianalysis = this.aianalysisCopy;
      this.$delete(formQuery, "deviceTypeCode");
      if (this.distinguishTreeQuery() === "1") {
        formQuery.deviceTypeCode = this.formInline.deviceTypeCode;
      } else if (this.distinguishTreeQuery() === "2") {
        formQuery.subTypeCode = this.formInline.deviceTypeCode;
      }
      this.getWaterChannelInfo(formQuery);
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      let formQuery = { ...this.formInline };
      // formQuery.aianalysis = this.aianalysisCopy;
      this.$delete(formQuery, "deviceTypeCode");
      if (this.distinguishTreeQuery() === "1") {
        formQuery.deviceTypeCode = this.formInline.deviceTypeCode;
      } else if (this.distinguishTreeQuery() === "2") {
        formQuery.subTypeCode = this.formInline.deviceTypeCode;
      }
      this.getWaterChannelInfo(formQuery);
    },
    //分类管理
    handleSort() {
      this.dialogVisibleSort = true;
    },
    // 删除
    async handleDelete(e) {
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // const { state, message } = await deleteChannelById({
          //   id: e,
          // });
          // if (state === 1) {
          //   this.$message({
          //     message: message,
          //     type: "success",
          //   });
          //   let formQuery = { ...this.formInline };
          //   // formQuery.aianalysis = this.aianalysisCopy;
          //   this.$delete(formQuery, "deviceTypeCode");
          //   if (this.distinguishTreeQuery() === "1") {
          //     formQuery.deviceTypeCode = this.formInline.deviceTypeCode;
          //   } else if (this.distinguishTreeQuery() === "2") {
          //     formQuery.subTypeCode = this.formInline.deviceTypeCode;
          //   }
          //   this.getWaterChannelInfo(formQuery);
          // } else {
          //   this.$message({
          //     message: message,
          //     type: "error",
          //   });
          // }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关注状态改变
    changeFocus(row, e) {
      const id = row.id;
      const name = row.channelName;
      if (e === "0") {
        // 取消关注
        // updateChannel({
        //   videoinfo: {
        //     id: id,
        //     focus: e,
        //     name: name,
        //   },
        // }).then(() => {
        //   this.getWaterChannelInfo();
        //   this.$message.success("已取消关注");
        // });
      } else {
        // 进行关注
        // updateChannel({
        //   videoinfo: {
        //     id: id,
        //     focus: e,
        //     name: name,
        //   },
        // }).then(() => {
        //   this.getWaterChannelInfo();
        //   this.$message.success("已关注");
        // });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.basic-information-container {
  padding: 12px;
  margin: 12px;
  background-color: #ffffff;
  .demo-form-inline {
    ::v-deep .el-form-item {
      margin-right: 22px;
    }
    ::v-deep .el-form-item__label {
      font-family: "SourceHanSansCN-Regular";
      font-weight: 400;
      font-size: 16px;
      color: #606163;
    }
    ::v-deep .el-radio {
      margin-right: 12px;
    }
    ::v-deep .el-radio__label {
      margin-left: 1px;
    }
    .select-width {
      width: 160px;
    }
  }
  .table-style {
    // border-top: 1px solid #e5e5e5; /* 修改水平线颜色为灰色 */
    // margin-top: 12px;
    // padding-top: 12px;
    .btn-style {
      display: flex;
      align-items: center;
    }
    .table-self {
      ::v-deep .el-table__header-wrapper th {
        background-color: #eff3fc;
      }
      margin-top: 10px;
      .imgBg {
        margin-top: 5px;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
    // 内容区域的样式
    .screen-container-body {
      margin: 10px 0;
      width: 100%;
      // 小于等于 1440px 时的样式
      max-height: calc(100vh - 340px);
      overflow: hidden;
      overflow-y: auto;

      // 媒体查询：当屏幕宽度超过 1440px 时的样式
      @media (min-width: 1441px) {
        height: calc(100vh - 290px);
      }
    }
    .fanYe {
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
